<script setup>
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//用户数据模型
const userList = ref([])

//用户搜索时选中的分类id
const user_Id = ref('')

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  articleList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  articleList()
}

//获取用户列表数据

import '@vueup/vue-quill/dist/vue-quill.snow.css'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const userModel = ref({
  user_name: '',
  user_Id: '',
  email: '',
  state: '',
  phone: ''
})


//导入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

//上传成功的回调函数
const uploadSuccess = (result)=>{
  userModel.value.coverImg = result.data;
  console.log(result.data);
}

//添加用户
import {ElMessage} from 'element-plus'
const addUser = async (clickState)=>{
  //把用户状态赋值给数据模型
  userModel.value.state = clickState;

  //调用接口
  let result = await userAddService(userModel.value);

  ElMessage.success(result.msg? result.msg:'添加成功');

  //让抽屉消失
  visibleDrawer.value = false;

  //刷新当前列表
  userList()
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>用户管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer = true">添加用户</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label=‘’>
        <el-select placeholder="请选择" v-model="">
          <el-option v-for="c in userList" :key="c.id" :label="c.Name" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userSearch">搜索</el-button>
        <el-button @click="Id = ''; state = ''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="user" style="width: 100%">
      <el-table-column label="用户名" width="400" prop="user_name"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="邮箱" prop="email"> </el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="电话" prop="phone"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary"></el-button>
          <el-button :icon="Delete" circle plain type="danger"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
      <!-- 添加用户表单 -->
      <el-form :model="userModel" label-width="100px">
        <el-input v-model="userModel.user_Id" placeholder="请输入用户ID"></el-input>
      </el-form>
    </el-drawer>
  </el-card>
</template>
<style scoped>

</style>